Highcharts লাইব্রেরি ব্যবহার করার সময় আপনি চার্টের থিম এবং স্টাইল কাস্টমাইজ করতে পারেন। Highcharts বিভিন্ন বিল্ট-ইন থিম এবং স্টাইলিং অপশন সরবরাহ করে, যা আপনাকে আপনার চার্টের ভিজ্যুয়াল প্রেজেন্টেশন উন্নত করতে সহায়ক। আপনি চার্টের রঙ, ফন্ট, লেআউট, এবং অন্যান্য উপাদান কাস্টমাইজ করতে পারেন। নিচে Highcharts এর থিম এবং স্টাইল পরিবর্তনের কিছু পদ্ধতি তুলে ধরা হলো।

1. বিল্ট-ইন থিম ব্যবহার করা

Highcharts কিছু প্রি-ডিফাইন্ড থিম সরবরাহ করে, যেগুলো আপনি আপনার চার্টে সহজেই অ্যাপ্লাই করতে পারেন। এটি করতে, প্রথমে Highcharts এর setOptions ফাংশন ব্যবহার করে থিম লোড করতে হবে।

উদাহরণ: বিল্ট-ইন থিম অ্যাপ্লাই করা

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
import HighchartsTheme from 'highcharts/themes/dark-unica';  // বিল্ট-ইন থিম

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  Highcharts = Highcharts;
  chartOptions = {
    chart: {
      type: 'line'
    },
    title: {
      text: 'Highcharts Example with Dark Unica Theme'
    },
    series: [{
      name: 'Example Series',
      data: [1, 2, 3, 4, 5]
    }]
  };

  constructor() {
    // থিম সেট করা
    Highcharts.setOptions(HighchartsTheme); 
  }
}

এখানে dark-unica থিম ব্যবহার করা হয়েছে। আপনি অন্যান্য থিম যেমন grid, skies, sand-signika ইত্যাদি ব্যবহার করতে পারেন।

2. চার্টের স্টাইল কাস্টমাইজ করা

Highcharts আপনাকে চার্টের প্রতিটি উপাদান কাস্টমাইজ করার সুযোগ দেয়। আপনি থিম এবং স্টাইলস নির্ধারণ করতে chartOptions ব্যবহার করতে পারেন। এই কনফিগারেশন দিয়ে আপনি রং, ফন্ট, টেক্সট সাইজ, এবং বিভিন্ন চার্ট উপাদানের স্টাইল পরিবর্তন করতে পারেন।

উদাহরণ: চার্টের কাস্টম স্টাইল

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  Highcharts = Highcharts;
  chartOptions = {
    chart: {
      type: 'column',
      backgroundColor: '#f4f4f4'  // চার্টের ব্যাকগ্রাউন্ড রঙ
    },
    title: {
      text: 'Styled Highcharts Example',
      style: {
        color: '#2f4f4f',  // শিরোনামের রঙ
        fontSize: '18px',
        fontWeight: 'bold'
      }
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
      labels: {
        style: {
          color: '#333',  // এক্স-অ্যাক্সিসের লেবেল রঙ
          fontSize: '14px'
        }
      }
    },
    yAxis: {
      title: {
        text: 'Value',
        style: {
          color: '#2f4f4f',  // y-axis টাইটেল রঙ
          fontSize: '16px'
        }
      },
      labels: {
        style: {
          color: '#666',  // y-axis লেবেল রঙ
          fontSize: '12px'
        }
      }
    },
    series: [{
      name: 'Sales',
      data: [3, 5, 7, 9, 6],
      color: '#ff5733'  // সিরিজের রঙ
    }]
  };
}

এখানে, চার্টের ব্যাকগ্রাউন্ড রঙ, শিরোনামের রঙ এবং সাইজ, এক্স এবং ওয়াই অ্যাক্সিসের লেবেল এবং সিরিজের রঙ কাস্টমাইজ করা হয়েছে।

3. চার্টের সিরিজ কাস্টমাইজেশন

Highcharts আপনাকে প্রতিটি সিরিজের জন্য আলাদাভাবে স্টাইল পরিবর্তন করতে দেয়। আপনি সিরিজের রঙ, স্টাইল, ডট শেপ, মার্কার সাইজ এবং অন্যান্য পারামিটার কাস্টমাইজ করতে পারেন।

উদাহরণ: সিরিজ কাস্টমাইজেশন

series: [{
  name: 'Example Sales',
  data: [1, 3, 2, 4, 5],
  color: '#00ff00',  // সিরিজের রঙ
  marker: {
    enabled: true,
    radius: 6,  // মার্কারের রেডিয়াস
    symbol: 'circle'  // মার্কারের আকার
  }
}]

এখানে, সিরিজের মার্কার রঙ এবং আকার কাস্টমাইজ করা হয়েছে।

4. নেভিগেশন কাস্টমাইজেশন

Highcharts এ চার্টের বিভিন্ন নেভিগেশন উপাদান যেমন Legend, Tooltip, Data Labels, এবং Credits কাস্টমাইজ করা যায়।

উদাহরণ: Legend কাস্টমাইজেশন

legend: {
  align: 'center',
  verticalAlign: 'top',
  layout: 'horizontal',
  itemStyle: {
    color: '#333',  // Legend item এর রঙ
    fontSize: '14px'
  }
}

এখানে Legend এর অবস্থান, লেআউট, এবং আইটেমের স্টাইল কাস্টমাইজ করা হয়েছে।

5. টুলটিপ কাস্টমাইজেশন

Highcharts এর টুলটিপ ব্যবহারকারীর জন্য গুরুত্বপূর্ণ তথ্য প্রদর্শন করে এবং আপনি এটি কাস্টমাইজ করতে পারেন।

উদাহরণ: টুলটিপ কাস্টমাইজেশন

tooltip: {
  backgroundColor: '#f4f4f4',  // টুলটিপের ব্যাকগ্রাউন্ড রঙ
  style: {
    color: '#000',  // টুলটিপের টেক্সট রঙ
    fontSize: '14px'
  },
  formatter: function () {
    return 'Custom Tooltip: ' + this.series.name + ' - ' + this.y;
  }
}

এখানে টুলটিপের রঙ এবং কাস্টম ফর্ম্যাটিং করা হয়েছে।

সারাংশ

Highcharts এ চার্ট থিম এবং স্টাইল কাস্টমাইজ করা খুবই সহজ এবং এটি ব্যবহারকারীকে ডেটা ভিজ্যুয়ালাইজেশনকে আরও সুন্দর এবং ইন্টারেক্টিভ করার সুযোগ দেয়। আপনি Highcharts.setOptions() ব্যবহার করে থিম পরিবর্তন করতে পারেন, এবং chartOptions এর মাধ্যমে চার্টের উপাদানগুলোর স্টাইল কাস্টমাইজ করতে পারেন। এতে করে আপনি আপনার চার্টের সমস্ত উপাদান যেমন রঙ, ফন্ট, লেআউট ইত্যাদি কাস্টমাইজ করতে পারবেন।